<template>
	<view class="codeContent">
		<view class="content flex-box">
			<view class="box">
				<view class="title">{{info.title}}</view>
				<view class="code-img">
					<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
				</view>
				<view class="hao">券码号：{{info.code || ''}}</view>
			</view>
		</view>
		
		<view class=" flex-box recommend">
			<text class="line"></text>
			<text class="text">门店商品</text>
			<text class="line"></text>
		</view>
		<view class="goods-data">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<goods-item  v-if="goodsList.length" :goodsList="goodsList" ></goods-item>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import uQRCode from '@/common/uqrcode.js'
	export default {
		mixins: [MescrollMixin], 
		components:[],
		data() {
			return {
				// 二维码标识串
				qrcodeText: 'eoruw20230528',
				goodsList:[],
				qrcodeSize:180,
				info:{
					order_sn:'',
					title:'',
					code:'',
				},
				page: 1,
				pageSize: 20,
				
			}
		},
		onLoad(option) {
			if(option.id){
				this.intData(option.id)
			}
		},
		methods: {
			intData(id){
				this.$u.api.myCode({
					order_id:id
				})
				.then(res=>{
					if(res.code==200){
						this.info = res.data
						this.make();
					}else{
						uni.showModal({
							title:"温馨提醒",
							content:res.msg,
							showCancel:false,
							confirmColor:"#D02227",
							success:(obj)=>{
								if(obj.confirm){
									uni.navigateBack()
								}
							}
						})
					}
				})
				.catch(err=>{
					console.log('err-',err)
				})
			},
			onGoodsList(id){
				uni.navigateTo({
					url: '/pages/GoodsDetails/lrGoodsDetails?id='+id
				})
			},
			make() {
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.info.code,
					size: this.qrcodeSize,
					margin: 0,
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			
			/*上拉加载的回调*/
			  upCallback(page) {
				  console.log(page,'111')
			    //联网加载数据
				  let _this = this
			   this.$u.api.indexGoodsList({
					page: page.num,
					flags:'service'
				   }).then(res=>{
			    	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			    	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			    	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			    	this.mescroll.endByPage(_this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
			    	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			    	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
			    
			    	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			    	// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
			      
			    	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			    	// this.mescroll.endSuccess(res.list.length);
					if(page.num == 1){_this.goodsList = []}else{} //如果是第一页需手动制空列表
					this.goodsList=this.goodsList.concat(res.msg.list); //追加新数据
			
			    }).catch(()=>{
			    	//联网失败, 结束加载
			    	this.mescroll.endErr();
			    })
			  }
		}
	}
</script>

<style lang="scss">
	page{
		background:#F6F7FB;
		 
	}
	.canvas{
		width: 400rpx;
		height: 400rpx;
		margin:0 auto;
	}
	.codeContent{
		width: 750rpx;
		overflow: auto;
		.content{
			background-color: #fff;
			padding:50rpx;
			width:700rpx;
			
			margin:30rpx auto;
			border-radius: 20rpx;
			text-align: center;
			.box{
				width:100%
			}
			.code-img{
				width:350rpx;
				height:350rpx;
				margin:20rpx auto;
				image{
					width:350rpx;
					height:350rpx;
				}
			}
			.hao{
				margin-top:30rpx;
			}
		}
	}

.recommend{
	padding:30rpx 0;
	justify-content: center;
	font-weight: bolder;
	font-size:36rpx;
	.line{
		display: inline-block;
		margin:0 20rpx ;
		width: 40rpx;
		height:4rpx;
		background:#353535;
	}
}
.goods-data{
	width: 100%;
	padding: 0 20rpx;
}
</style>
